<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head th:replace="_fragments::head(关于我)">
  	 <meta charset="utf-8" /> 
	 <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
	 <meta name="viewport" content="width=device-width, initial-scale=1"/>
  </head>
  
  <body>
	<!-- 导航条 -->
	<nav th:replace="_fragments::nav(1)" class="navbar navbar-default navbar-fixed-top " style="background-color: rgba(0,0,0,0.5);border: 0.5px;">
	</nav>
	<!--表头主体背景-->
	<div style="height: 265px;">
	<div id="header-blog"  style=" height:365px; background-image: url(image/1.jpg); background-size:cover; background-position: center;background-repeat: no-repeat;margin: 0 auto;
		position: relative;z-index: -1;">
	</div>
	</div>
	<!-- 中间主体 -->
	<div id="main" class="container">
		<div class="row">
			<!--正文-->
			<div class="col-md-8 panel panel-default" style="padding: 0px;">
				<!--标注-->
				<div class="panel-heading" style="background:#fff">
					<div class="pull-left" style="color:#a7a7a7;">
						<span class="label label-default">杂记</span>
					</div>
					<div class="pull-right">
						<span><a href="index.html">博客</a>  / </span>
						<span style="">正文</span>
					</div>
					<div class="clearfix"></div>
				</div>
				<!--正文-->
				<div class="panel-body" style="margin: 10px 15px;">
					<div id="blog-text-head" style="text-align: center;">
						<h2>关于网站</h2>
						<div style="color:#a7a7a7; font-size: 10px;">
							<br/>
							<span class="glyphicon glyphicon-user"></span>
							<span>  {{user.username}}</span>
							    
							<span class="glyphicon glyphicon-edit"></span>
							<span>  发表日期：{{blog.createtime}}</span>
							    
							<span class="glyphicon glyphicon-eye-open"></span>
							<span>  {{blog.browsenum}}</span>
						</div>
					</div>
					<div id="blog-text-content">
						<!-- <div>
						<h3>网站运行状态</h3>
						<p>
						节日到啦，牛牛和妞妞邀请了好多客人来家里做客。
						他们摆出了一座高高的香槟塔，牛牛负责听妞妞指挥，往香槟塔里倒香槟。
						香槟塔有个很优雅的视觉效果就是如果这一层的香槟满了，就会从边缘处往下一层流去。
						妞妞会发出两种指令，指令一是往第x层塔内倒体积为v的香槟，指令二是询问第k层塔香槟的体积为多少。
						告诉你香槟塔每层香槟塔的初始容量，你能帮牛牛快速回答妞妞的询问吗？
						</p>
						<p></p>
						<p></p>
						</div> -->
					</div>
					<div id="blog-text-footer" style="margin:50px 20px;">
						<div style="border-bottom: 1px solid #ddd;">
						</div>
					</div>
				</div>
					<!--底部评论区-->
				<div class="panel-body" style="border-top: 1px solid #ddd;">
					<div class="panel panel-default">
					  <div class="panel-heading">评论区</div>
					  <!--最新评论-->
					  <div class="panel-body">
					    <h4>最新评论</h4>
					    <br/>
					    <ul class="list-group" style="border: 0px; margin-bottom: 0px;">
					    	<li class="list-group-item">
					    		<div>
					    			<h5><b>陈二狗</b>     <span class="content-footer">2020-08-15 21:24</span></h5>
					    			<p>点赞收藏加评论，一键三连拉！</p>
					    			<a href="#"><span class="content-footer">回复</span></a>
					    		</div>
					    	</li>
					    	<li class="list-group-item">
					    		<div>
					    			<h5><b>陈二狗</b>     <span class="content-footer">2020-08-15 21:24</span></h5>
					    			<p>点赞收藏加评论，一键三连拉！</p>
					    		</div>
					    		<a href="#"><span class="content-footer">回复</span></a>
					    	</li>
					    </ul>
					    <nav aria-label="Page navigation">
						  <ul class="pagination">
						    <li>
						      <a href="#" aria-label="Previous">
						        <span aria-hidden="true">&laquo;</span>
						      </a>
						    </li>
						    <li><a href="#">1</a></li>
						    <li><a href="#">2</a></li>
						    <li><a href="#">3</a></li>
						    <li>
						      <a href="#" aria-label="Next">
						        <span aria-hidden="true">&raquo;</span>
						      </a>
						    </li>
						  </ul>
						</nav>
					  </div>
					  <!--发布区-->
					  <div class="panel-body" style="border-top: 1px solid #ddd;">
					  	<form>
						  <div class="form-group">
						    <textarea  class="form-control"></textarea>
						  </div>
						  <button type="submit" class="btn btn-default">发表评论</button>
						</form>
					  </div>
					</div>
				</div>
			</div>

			<!--侧边目录-->
			<div id="sder-main" class="col-md-4" style="margin-top: 51px;">
				<div class="panel panel-default" style="padding: 10px 10px;">
					<div id="panel-heading">
					<h4>关于我</h4>
					</div>
					<div class="panel-body" style="border-top: 1px solid #ddd;">
						<a href="#" class="thumbnail">
						<img class="img-responsive" src="image/10.png" alt="..." />
						</a>
					</div>
					<div class="panel-body" style="border-top: 1px solid #ddd;">
						<ul class="list-inline about-meskill">
							<li><a class="btn btn-info">Java</a></li>
							<li><a class="btn btn-info">MySql</a></li>
							<li><a class="btn btn-info">Oracle</a></li>
							<li><a class="btn btn-info">HTML/CSS</a></li>
							<li><a class="btn btn-info">Bootstrap</a></li>
							<li><a class="btn btn-info">Spring</a></li>
							<li><a class="btn btn-info">Mybaits</a></li>
							<li><a class="btn btn-info">SSH</a></li>
						</ul>
					</div>
					<div class="panel-body" style="border-top: 1px solid #ddd;">
						<ul class="list-inline about-meskill">
							<li><a class="btn btn-danger">运动(假)</a></li>
							<li><a class="btn btn-danger">看书（假）</a></li>
							<li><a class="btn btn-danger">看电影（...）</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!--中间结束-->

	<!-- 底部 -->
	<footer th:replace="_fragments::footer" class="panel-footer" style="background: #2a2730; color: #fff">
	</footer>

<div th:replace="_fragments::js">
</div>
</body>
  
  
<script>
//通过vue.js 把数据和对应的视图关联起来
var url = "http://localhost:8888/blogMarkdown";
new Vue({
      el: '#main',
      data: {
        blog: [],
        user:[],
        id:1
      },
      created:function(){
    	  var seft=this;
    	  $.ajax({
				url:url+"/"+seft.id,
				type:'get',  
				//async: false,//同步
				//dateType:"json",
				success : function(ret){
					seft.blog=ret.data;
					$("#blog-text-content").html(seft.blog.content);
			    	seft.user=seft.blog.user;
				},
				fail:function(){
					console.log("请求错误:");
				}
			}); 
      },
      methods:{//所有方法必须在method里创建
      }
    })
</script>
</html>